<template>
    <view class="container" :style="themeColor">
        <cart-temp ref="cartTemp"></cart-temp>
        <view class="groupMenu" :style="{ height: `${tabbarHeight - raisedeHeight + safeAreaHeight + 4}px` }">
            <view class="menu" @click="goUrl('home')">
                <view class="iconSize"
                    ><dynamic-iconsfont customIcons="icon-shouye-moren" color="#666666" size="40"></dynamic-iconsfont
                ></view>
                <text class="name">首页</text>
            </view>
            <view class="menu" @click="goUrl('group')">
                <view class="iconSize"
                    ><dynamic-iconsfont customIcons="icon-tuangou-moren" color="#666666" size="40"></dynamic-iconsfont
                ></view>
                <text class="name">团购专区</text>
            </view>
            <view class="menu">
                <view class="iconSize"
                    ><dynamic-iconsfont
                        customIcons="icon-gouwuche-xuanzhong"
                        class="active"
                        size="40"></dynamic-iconsfont
                ></view>
                <text class="badge" v-if="num > 0">{{ num > 99 ? "99+" : num }}</text>
                <text class="active name">购物车</text>
            </view>
            <view class="menu" @click="goUrl('me')">
                <view class="iconSize"
                    ><dynamic-iconsfont
                        customIcons="icon-gerenzhongxin-moren"
                        color="#666666"
                        size="40"></dynamic-iconsfont
                ></view>
                <text class="name">我的</text>
            </view>
        </view>
    </view>
</template>

<script>
const SAFE_AREA_INSET_BOTTOM = 10
import dynamicIconsfont from "@/uni-sub-base/components/dynamic/dynamic-iconsfont.vue"
import { getPx } from "@/components/lb-tabbar/utils"
import cartTemp from "@/pages/group/cart/cartTemp.vue"
import { getUserCarList } from "@/utils/cartUtil.js"
import { eventBus } from "@/utils/eventBus.js"
export default {
    components: {
        cartTemp,
        dynamicIconsfont,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        safeAreaInsetBottom: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (newVal) {
                    this.setStatusBarStyle("dark")
                    setTimeout((e) => {
                        this.$refs.cartTemp.getListHeight()
                        // this.$refs.cartTemp.refresh()
                    }, 100)
                }
            },
            immediate: true,
        },
    },
    computed: {
        safeAreaHeight() {
            return this.isIphoneX && this.safeAreaInsetBottom ? SAFE_AREA_INSET_BOTTOM : 0 // 苹果X等机型安全区高度
        },
        iconHeight() {
            return getPx(this.iconSize)
        },
        raisedeHeight() {
            return this.hasRaisede ? (this.iconHeight * this.raisedeScale) / 2 : 0 // 凸起高度
        },
        tabbarHeight() {
            const height = getPx(this.height) // 默认高度
            const raisedeHeight = this.hasRaisede ? (this.iconHeight * this.raisedeScale) / 2 : 0 // 凸起高度
            const tabbarHeight = height + this.safeAreaHeight + raisedeHeight // 整体高度
            return tabbarHeight
        },
    },
    data() {
        return {
            refreshOk: false,
            height: "50px",
            num: 0,
            hasRaisede: false,
            isIphoneX: false,
        }
    },
    created() {
        const res = uni.getSystemInfoSync()
        const { model, statusBarHeight } = res
        if (
            (model.indexOf("iPhone") > -1 && statusBarHeight > 20) ||
            model.indexOf("iPhone X") > -1 ||
            model.indexOf("iPhone 1") > -1
        ) {
            this.isIphoneX = true
        }
        this.getTabbarHeight()
    },
    methods: {
        getTabbarHeight() {
            return this.tabbarHeight
        },
        goUrl(name) {
            if (name == "home") {
                getUserCarList().then((res) => {})
                this.easyReLaunchToHome()
            } else if (name == "group") {
                this.easyGoTo("/pages/group/index")
            } else if (name == "me") {
                getUserCarList().then((res) => {})
                this.easyGoTo("/pages/me/index")
            }
        },
        upCart(isOnShow) {
            this.isOnShow = isOnShow
            //离开页面 同步购物车  TODO 增加条件 有变更 再同步
            getUserCarList(true, 23).then((res) => {
                this.isChangeCart = false
            })
        },
        //获取购物车总数
        getCartNum(cartData) {
            this.num = cartData.length
        },
    },
    onShow() {},
    mounted() {
        eventBus.$on("SET_CART", (msg) => {
            if (msg) {
                this.getCartNum(msg)
            }
        })
    },
}
</script>

<style lang="scss">
.groupMenu {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #ffffff;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    .menu {
        position: relative;
        text-align: center;
    }
    .name {
        color: #666666;
    }
    .iconSize {
        height: 40rpx;
        line-height: 40rpx;
        margin: 12rpx 0 0rpx 0;
    }
    .active {
        color: $app-color-main !important;
        text {
            color: $app-color-main !important;
        }
    }
}
.badge {
    height: 14px;
    line-height: 14px;
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
    margin-top: 5px;
    font-size: 10px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    color: #fff;
    transform: translate(50%, -50%);
    background-color: #fe5128;
    border-radius: 9999px;
    position: absolute;
    top: 10rpx;
    right: 10rpx;
}
</style>
